<template>
    <div class="user-header">
        <div class="back" v-if="hasLeft" @click="goBack" >
            <span class="iconfont icon-arrow-left-bold"></span>
        </div>
        <div ><span>{{ title }}</span></div>
                <div class="right" v-if="hasRight">
            <span class="">{{ rightTxt }}</span>
        </div>
    </div>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
            required:true
        },
        rightTxt:{
            type:String,
            required:true
        },
        hasRight:{
            type:Boolean,
            required:false
        },
        hasLeft:{
            type:Boolean,
            required:false
        },
    },
    methods:{
        goBack(){
            this.$emit('changeBack');
        }
    }
    }
</script>
<style  scoped>
.user-header{
    height: 48px;
    width: 100%;
    line-height: 48px;
    display: flex;
    justify-content: center;
    border-bottom: 1 solid #292831;
    background: #101321;
    color: #eeeeee;
    position: relative;
}
.back{
    position: absolute;
    left: 10px;
}
.right{
    position: absolute;
    right: 10px;
}
</style>